import { useEffect } from 'react';
import { ArticleModelState, Link, useDispatch, useSelector } from 'umi';
import styles from './index.less';
import { formatDate } from '@/utils';
import { Spin } from 'antd';
import {
  EyeOutlined,
  ShareAltOutlined,
  HeartOutlined,
} from '@ant-design/icons';
import classNames from 'classnames';
export default function FooterRecommendReading() {
  const { articleList } = useSelector(
    (state: { article: ArticleModelState }) => state.article,
  );

  // 通过useDispatch获取dispatch
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch({
      type: 'article/getArticleList',
    });
  }, []);
  return (
    <div className={styles.footer_recommended_reading}>
      <p>推荐阅读</p>
      <div className={styles.ammbB8tpRTlzwGu9Q8GNE}>
        <div className={styles.loading}>
          <div className={styles.spin_container}>
            <div className={styles.ILwjOWV5UwcJFf9ezqGA0}>
              {articleList.length > 0
                ? articleList.map((item,index) => {
                    return (
                      <div
                        key={index}
                        className={styles._2D8ED0giWo1nndxIezP9QV}
                      >
                        <div style={{ opacity: 1 }}>
                          <Link to={`/article/${item.id}`}>
                            <header>
                              <div className={styles.title}>{item.title}</div>
                              <div className={styles.time}>
                                <div
                                  className={classNames(
                                    styles.ant_divider,
                                    styles.ant_divider_vertical,
                                  )}
                                ></div>
                                <span
                                  className={styles._2Mkgs6voFLMQqzoODDiOee}
                                >
                                  <time>{formatDate(item.updateAt)}前</time>
                                </span>
                                <div
                                  className={classNames(
                                    styles.ant_divider,
                                    styles.ant_divider_vertical,
                                  )}
                                ></div>
                                <span
                                  className={styles._2Mkgs6voFLMQqzoODDiOee}
                                >
                                  {item.category ? item.category.label : null}
                                </span>
                              </div>
                            </header>
                            <main>
                              {item.cover ? (
                                <div className={styles.left}>
                                  <img src={item.cover} alt="" />
                                </div>
                              ) : (
                                ''
                              )}

                              <div className={styles.right}>
                                <div className={styles._1a1sLsWPcIiIOw3Zw2i3it}>
                                  {item.summary}
                                </div>
                                <div className={styles.icons}>
                                  <span>
                                    <EyeOutlined />
                                    <span
                                      className={styles._1lythm_jbjMURtN_zieAom}
                                    >
                                      {item.likes}
                                    </span>
                                  </span>
                                  <span className={styles.ElyAw9QkgByDAuselHsq}>
                                    ·
                                  </span>
                                  <span>
                                    <HeartOutlined />
                                    <span
                                      className={styles._1lythm_jbjMURtN_zieAom}
                                    >
                                      {item.views}
                                    </span>
                                  </span>
                                  <span className={styles.ElyAw9QkgByDAuselHsq}>
                                    ·
                                  </span>
                                  <span>
                                    <ShareAltOutlined />
                                    <span
                                      className={styles._1lythm_jbjMURtN_zieAom}
                                    >
                                      分享
                                    </span>
                                  </span>
                                </div>
                              </div>
                            </main>
                          </Link>
                        </div>
                      </div>
                    );
                  })
                : '暂无数据'}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
